<template>
  <div id="app">
     <router-view/>
    
    <div id="nav">
      <router-link v-for="nav of navList" v-bind:key="nav.id" v-bind:to="nav.to">
        <div v-if="totalnumber !=0 &&nav.name=='购物车'" class="red-point" >
             <span style="line-height:15px">{{totalnumber}}</span>
          </div>
        <div style="margin-top:10px" @click="changeStatus(nav.id)">
        <div><img  v-if="nav.selected" :src="nav.selectedImg"/>
        <img v-else :src="nav.noSelectedImg"/></div>
        
        <div v-if="nav.selected" style="color:#ff6600;margin-letf:5px">{{nav.name}}</div>
        <div v-else style="color:#bfbfbf;margin-letf:5px">{{nav.name}}</div>
        </div>
      </router-link>
     
    </div>
   
  </div>
</template>

<script>
 
import axios from 'axios'

export default {
  
  created(){
     this.$bus.$on("totalnumChange",(value)=>{
       this.totalnumber=value;
     })
  },
  mounted(){
      //发送ajax请求得到导航栏列表
   
      axios.get("/api/v1/navList") 
      .then((res)=>{
        console.log(res);
        this.navList=res.data.navList;

      });
      axios.get("/api/v1/totalNumber") 
      .then((res)=>{
        console.log(res);
        this.totalnumber=res.data.totalNumber;

      })
  },
  
    
  methods:{
     //需要一个函数，当div被点击的时候，让点击的导航变选中状态 其他的为不选中
    changeStatus(id){
     
      this.navList.forEach(nav=>{
        if(id == nav.id){
          nav.selected= true;
        }else{
          nav.selected=false;
        }
      })
    }
  },
  data(){
    return{
      navList:[],
      totalnumber:0 // 用户当进入应用的时候需要从服务器获取购物车商品数量。 在购物车中修改商品数量的时候需要动态的改变显示的值
    }
  }
}
</script>

<style lang="scss">
@media screen and (min-width:  320px) {
  .red-point{
    background-color: red;
    color:#fff;
    position: absolute;
    left:280px;
    width: 15px;
    height: 15px;
    border-radius: 8px;
    text-align: center

  }

 #app{
   display:flex;
   flex-direction: column;
 }
 #nav{
   background-color:#fafafa;
   height: 67px;
   width:100%;
   position: fixed;
   bottom:0px;
   display:flex;
   flex-direction: row;
   justify-content: space-around;
   border-top:1px solid #eeeeee;
   padding: 4px;
   z-index:5;
   img{
     width: 30px;
     height: 30px;
   }
   a{
     color:black;
     text-decoration: none;
   }
 }
 }
</style>

